<div id='rvd-designer' cly-reporter class='rvd-designer alert-container cly-reporter'>
	<!-- navigation bar for errors -->
	<nav ng-show='projectError' class="navbar navbar-default" role="navigation">
		<div ng-switch on="projectError.className" class="collapse navbar-collapse navbar-ex1-collapse">
			<div ng-switch-when='ProjectDoesNotExist' class='navbar-text navbar-rvd-centered'>
				{{'designerProjectNotFoudLabel1' | translate}} <em>{{application.friendly_name}}</em> {{'designerProjectNotFoudLabel2' | translate}} <a href="#">{{'designerProjectNotFoudLabel3' | translate}}</a>
			</div>
			<div ng-switch-default class='navbar-text navbar-rvd-centered'>
				{{'designerUnknownErrorLabel1' | translate}} <a href="#">{{'designerUnknownErrorLabel2' | translate}}</a>
			</div>
		</div>
	</nav>

	<div ng-hide='projectError'>

		<div class="graph-wrap">
			<div class="row" ng-if="showGraph">
				<div class="col-md-12">
					<div class="graph" >
						<div  style="margin: 5px; position:relative;">
							<div class="graph-controls form-group">
								<button ng-click="makeFullScreen('paperContainer')" class="btn" title="Make fullscreen"><i class="fa fa-arrows-alt"></i></button>
								<button ng-click="drawGraph()" class="btn" title="Refresh"><i class="fa fa-refresh"></i></button>

							</div>
							<!--<div class="text-center" style="overflow: scroll;" id="paper" ng-init="drawGraph()"></div>-->
							<div id="paperContainer" >
								<div class="text-center" id="paper" style="overflow: scroll;" ng-init="drawGraph()"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row is-flex">

			<!-- Left menu -->
			<div class="verb-toolbox col-md-2">

				<div ng-show='!project.projectKind || project.projectKind=="voice"' class='form-group'>
					<div basic-draggable drop-target='.steps' class="verb-button button-play label btn-default rvd-pickable"><i class='fa fa-play-circle'></i> &nbsp;{{'designerVoicePlayLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' drag-model='protos.stepProto.say' class="verb-button button-say label btn-default rvd-pickable"><i class='fa fa-quote-left'></i> &nbsp;{{'designerVoiceSayLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-gather label btn-default rvd-pickable"><i class='fa fa-th'></i> &nbsp;{{'designerVoiceCollectLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-dial label btn-default rvd-pickable"><i class='fa fa-phone'></i> &nbsp;{{'designerVoiceDialLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-hungup label btn-default rvd-pickable"><i class='fa fa-times'></i> &nbsp;{{'designerVoiceHangUpLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-control label btn-default rvd-pickable"><i class='fa fa-cogs'></i> &nbsp;{{'text_Control' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-externalService label btn-default rvd-pickable"><i class='fa fa-external-link'></i> &nbsp;{{'designerVoiceExternalServiceLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-log label btn-default rvd-pickable"><i class='fa fa-align-justify'></i> &nbsp;{{'designerVoiceLogLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-reject label btn-default rvd-pickable"><i class='fa fa-thumbs-o-down'></i> &nbsp;{{'designerVoiceRejectLabel' | translate}}</div>

					<div basic-draggable drop-target='.steps' class="verb-button button-redirect label btn-default rvd-pickable"><i class='fa fa-link'></i> &nbsp;{{'designerVoiceRedirectLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-pause label btn-default rvd-pickable"><i class='fa fa-pause'></i> &nbsp;{{'designerVoicePauseLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-sms label btn-default rvd-pickable"><i class='fa fa-envelope-o'></i> &nbsp;{{'designerVoiceSmsLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-email label btn-default rvd-pickable"><i class='fa fa-comment-o'></i> &nbsp;{{'designerVoiceEmailLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-record label btn-default rvd-pickable"><i class='fa fa-microphone'></i> &nbsp;{{'designerVoiceRecordLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-fax label btn-default rvd-pickable"><i class='fa fa-print'></i> &nbsp;{{'designerVoiceFaxLabel' | translate}}</div>
				</div>
				<div ng-show='project.projectKind=="ussd"' class='form-group'>
					<div basic-draggable drop-target='.steps' class="label btn-default verb-button button-ussdLanguage rvd-pickable"><i class='fa fa-globe'></i> &nbsp;{{'designerUssdLanguageLabel' | translate}}</div>
					<div basic-draggable drop-target='.ussd-collect-messages,.steps' class="label btn-default verb-button button-ussdSay rvd-pickable"><i class='fa fa-envelope-o'></i> &nbsp;{{'designerUssdUssdMessageLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="label btn-default verb-button button-ussdCollect rvd-pickable"><i class='fa fa-question'></i> &nbsp;{{'designerUssdUssdCollectLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-control label btn-default rvd-pickable"><i class='fa fa-cogs'></i> &nbsp;{{'text_Control' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="label btn-default verb-button button-externalService rvd-pickable"><i class='fa fa-external-link'></i> &nbsp;{{'designerUssdExternalServiceLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-log label btn-default rvd-pickable"><i class='fa fa-align-justify'></i> &nbsp;{{'designerUssdLogLabel' | translate}}</div>
				</div>
				<div ng-show='project.projectKind=="sms"' class='form-group'>
					<div basic-draggable drop-target='.steps' class="verb-button button-sms label btn-default rvd-pickable"><i class='fa fa-envelope-o'></i> &nbsp;{{'designerSmsSmsLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-redirect label btn-default rvd-pickable"><i class='fa fa-link'></i> &nbsp;{{'designerSmsRedirectLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-control label btn-default rvd-pickable"><i class='fa fa-cogs'></i> &nbsp;{{'text_Control' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="label btn-default verb-button button-externalService rvd-pickable"><i class='fa fa-external-link'></i> &nbsp;{{'designerSmsExternalServiceLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-email label btn-default rvd-pickable"><i class='fa fa-comment-o'></i> &nbsp;{{'designerVoiceEmailLabel' | translate}}</div>
					<div basic-draggable drop-target='.steps' class="verb-button button-log label btn-default rvd-pickable"><i class='fa fa-align-justify'></i> &nbsp;{{'designerSmsLogLabel' | translate}}</div>
				</div>

				<!-- wavManager -->
				<div ng-controller="wavManagerController" ng-show='project.projectKind=="voice"'>
					<h5 class='text-center'><strong>{{'Media resources' | translate}}</strong></h5>

					<div class='drop-area' ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="dropping" ng-show="dropSupported">
						<div class="drop-prompt">{{'Drop new media' | translate}}</div>
					</div>
					<div ng-file-drop-available="dropSupported=true" ng-show="!dropSupported">{{'designerHtml5DropLabel' | translate}}</div>

					<div>
						<div class='text-left more-audio-resources'>
							<a class='rvd-clickable' ng-show='!showAudioResources' ng-click='showAudioResources = true'>{{'designerMoreLabel' | translate}}</a>
						</div>
						<div ng-show='showAudioResources'>
							<div class='row' ng-repeat='wavItem in project.wavList'>
								<div ng-show='!wavItem.viewMode'>
									<div class='col-md-10 ellipsis' tooltip='{{wavItem.filename}}' tooltip-popup-delay="1000" tooltip-trigger="mouseenter">{{wavItem.filename}}</div>
									<div class='col-md-1'>
										<i  ng-click="wavItem.viewMode='confirm-delete'" class="fa fa-trash-o rvd-clickable" ></i>
									</div>
								</div>
								<div class="col-md-12 text-center delete-confirmation " ng-show="wavItem.viewMode=='confirm-delete'">
									<div>{{'designerConfirmDeleteLabel1' | translate}} <em>{{wavItem.filename}}</em> {{'designerConfirmDeleteLabel2' | translate}}</div>
									<i class="fa fa-trash-o rvd-clickable" ng-click="deleteWav(wavItem)"></i> &nbsp; <a class="rvd-clickable" ng-click="wavItem.viewMode=false">{{'designerCancelLabel' | translate}}</a>
								</div>
							</div>
							<a class='rvd-clickable' ng-click="showAudioResources = false"><i class="fa fa-angle-double-up" ></i></a>
						</div>
					</div>
				</div>
			</div>
			<!-- /wavManager -->

			<!-- Workspace on the right -->
			<div class="col-md-10 steplisting">
				<div >
						<div class="module-menu-area row" id="es">
							<div class="col-md-12">
								<div class="btn-group dropdown">
									<button class="btn btn-link dropdown-toggle" title="Select module to edit">{{'designerModules' | translate}}  <span class="caret"></span></button>
									<ul class="dropdown-menu">
										<li class="rvd-clickable-text"><a ng-click="editAllNodes(getAllTargets(), searchToken, moduleFilterEnabled)"><span ng-hide="moduleFilterEnabled">{{'designerEditAll' | translate}}</span><span ng-show="moduleFilterEnabled">{{'designerEditFiltered' | translate}}</span></a></li>
										<li class="rvd-clickable-text"><a ng-click="hideAllNodes(getAllTargets())"><span>{{'designerHideAllLink' | translate}}</span></a></li>
										<li class="divider" role="presentation"></li>
										<li class="rvd-clickable-text" ng-repeat='node in getAllTargets() | filterNodesByLabel:searchToken:moduleFilterEnabled | orderBy:"label"'><a ng-click="editNode(node.name)">{{node.label}}</a></li>
									</ul>
								</div>
								<button id="designer-module-add" ng-click="addNodeClicked(project.projectKind)" class="btn btn-link" title="{{'designerNewModuleLinkTitle' | translate}}">
									<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
								</button>
								<div class="btn-group dropdown">
									<button href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown" title="{{'designerStartupModuleLinkTitle' | translate}}">{{'designerStartupModuleLink' | translate}} <strong>{{nodeNamed(project.startNodeName).label}}</strong>	 <span class="caret"></span></button>
									<ul class="dropdown-menu">
										<li class="rvd-clickable-text" ng-repeat='node in getAllTargets() | orderBy:"label"'><a ng-click="setStartNode(node.name)">{{node.label}}</a></li>
									</ul>
								</div>
								<button ng-click="signalSavePressed()" class="save-button btn btn-link"><span ng-hide="saveSpinnerShown">Save</span><i ng-show="saveSpinnerShown" class="fa fa-spinner fa-spin"></i></button>

								<div ng-show="!startupNodeSet()" class='rvd-subheader-message'>
									<span class="validation-error">{{'designerValidationErrorLabel1' | translate}} <em>{{'designerValidationErrorLabel2' | translate}}</em> {{'designerValidationErrorLabel3' | translate}}</span>
								</div>
							</div>

							<!--
                                                        <div class="col-md-3">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-search" title="{{'designerInputSearchLabelTitle' | translate}}"></i></span>
                                                                <input class="form-control" ng-model="searchToken" ng-change="showNodesDropdown=true;" ng-blur="showNodesDropdown=false;" title="{{'designerInputSearchRegexTitle' | translate}}" placeholder="{{'designerInputSearchPlaceholder' | translate}}">
                                                                <div class="input-group-btn" ng-class='{open:showNodesDropdown}' >
                                                                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                                      <span class="caret"></span>
                                                                  </button>
                                                                  <ul class="dropdown-menu pull-right" role="menu">
                                                                    <li ng-repeat="node in getAllTargets() | filterNodesByLabel:searchToken"><a ng-mousedown="editNode(node.name)" class="rvd-clickable-text">{{node.label}}</a></li>
                                                                    <li role="presentation" class="divider"></li>
                                                                    <li><a ng-mousedown="editFilteredNodes(getAllTargets(),searchToken)" title="{{'designerEditListedLinkTitle' | translate}}"><span class="text-muted rvd-clickable-text">{{'designerEditListedLink' | translate}}</span></a></li>
                                                                    <li><a ng-mousedown="hideAllButStartNode(getAllTargets(),project.startNodeName)" title="{{'designerHideAllLinkTitle' | translate}}"><span class="text-muted rvd-clickable-text">{{'designerHideAllLink' | translate}}</span></a></li>
                                                                  </ul>
                                                                </div>
                                                            </div>
                                                            <div class="help-block" style="margin-top: 0px;"><small><i>{{'designerInputSearchHelp' | translate}}</i></small></div>
                                                        </div>
                            -->

						</div>

						<ul ng-show="visibleNodes.length != 0" class="nav nav-tabs module-tabs">
							<!-- tabs -->
							<li ng-repeat='nodeSummary in getEditedNodeNames()'
								ng-class="{active:isNodeActive(nodeSummary.name)}" class="module-tab">
								<span ng-click='setActiveNode(nodeSummary.name)' href="#" class='navtab'
									  title='{{nodeSummary.name}}' ng-init="view={editLabel:false,label:getNodeLabel(nodeSummary.name)}"> <span
										ng-show='!view.editLabel'> <!-- <a ng-click='node.iface.editLabel=!node.iface.editLabel'>{{node.label}}</a> -->
										<a ng-click='onEditNodeLabel(view,nodeSummary.name)' class="rvd-clickable-text module-tab-label">{{getNodeLabel(nodeSummary.name)}}</a>
										&nbsp;&nbsp;&nbsp;
										<i ng-click='removeNode(nodeSummary.name)' ng-show="isNodeActive(nodeSummary.name)" class='fa fa-trash-o rvd-clickable' title="{{'designerTabRemoveModuleTitle' | translate }}"></i>
										&nbsp;&nbsp;
										<i ng-click='hideNode(nodeSummary.name)' ng-show="isNodeActive(nodeSummary.name)" class='fa fa-sort-desc rvd-clickable' title="{{'designerTabHideModuleTitle' | translate}}"></i>

								</span>
									<div ng-show='view.editLabel'>
										<input type='text' ng-model='view.label'
											   ng-focus='view.editLabel'
											   ng-focus-lost="onEditLabelFinished(view,nodeSummary.name)" />
										&nbsp;
									</div>
							</span></li>
						</ul>

						<div class="rvd-node" ng-show="visibleNodes.length == 0" class="row">
							<div class="no-modules-warning text-muted">No modules are being edited. Use the <i>Modules</i> dropdown to edit an existing module or create a new one.</div>
						</div>

						<div class="rvd-node" ng-repeat="nodeSummary in getEditedNodeNames()" ng-show="isNodeActive(nodeSummary.name)">

							<div ng-controller="nodeController">
								<ng-include src="'templates/modules/' + node.kind + 'Module.html'"></ng-include>
							</div>
						</div>

				</div>
			</div>

			<!--
			<div ng-controller="exceptionConfigCtrl">
				<a ng-click="openExceptionModel()">Show exceptions</a>
			</div>
			 -->


		</div>

	</div>
</div>

